<template>
	<view class="content">
		<navBar>
			<template @click="backPage()" slot="left">
				<u-icon name="arrow-left" color="#fff"></u-icon>
			</template>
			<template class="centerText" slot="center">
				<!-- <view class="" style="color: #fff">人脸信息录入</view> -->
				<view class="" style="color: #fff">上传图片</view>
			</template>
		</navBar>

		<view v-if="userInfo.is_face == 2" class="tips">
			<!--
			  请保证五官清晰可见，避免佩戴帽子、墨镜、口罩等物件，保证光线充足、避免阳光直射，以提高录入成功率-->
			请保保证光线充足、避免阳光直射，以提高上传成功率
		</view>
		<view v-else class="tips">
			<!-- 您已录入过人脸信息 -->
			您已上传过图片
		</view>

		<view class="img_box">
			<!-- <image src="/static/images/faceVerify.png" mode=""></image> -->
		</view>
		<view class="bottom_box">
			<view class="submit_btn">
				<u-button @click="startEnter()" color="#39cccc" shape="circle"
					type="primary">{{userInfo.is_face==2? '开始上传' : '图片更新'}}</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {

			};
		},
		components: {
			navBar
		},
		computed: {
			...mapGetters([
				'userInfo'
			])
		},

		methods: {
			backPage() {
				uni.navigateBack();
			},
			//调用相机
			startEnter() {
				const that = this
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['camera'],
					camera: 'front',
					success(res) {
						uni.showLoading({
							title: '上传中'
						});
						that.uploadFace(res.tempFiles[0].tempFilePath)
					},
					fail(err) {
						console.log(err, '相机调用失败');
					},
					// complete() {
					// 	uni.hideLoading();
					// }
				})
			},
			//上传人脸
			async uploadFace(faceUrl) {
				const that = this
				let baseUrl = ''
				that.userInfo.is_face == 1 ?
					baseUrl = 'face/edit' : baseUrl = 'face/add'
				uni.uploadFile({
					url: `https://api.wanwucloud.cn/api/${baseUrl}`,
					filePath: faceUrl,
					name: 'file',
					header: {
						AuthorToken: that.$store.state.user.userInfo.token
					},
					success: (res) => {
						let successRes = JSON.parse(res.data)
						if (successRes.code == 200) {
							uni.hideLoading();
							uni.showToast({
								icon: 'success',
								title: successRes.msg,
								duration: 2000
							})

							if (that.userInfo.is_face == 2) {
								let userInfo = uni.getStorageSync('userInfo')
								userInfo.is_face = 1
								that.$store.commit('user/SET_USER_INFO', userInfo)
							}

							setTimeout(() => {
								that.backPage()
							}, 1000)
						} else {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: '上传失败',
								duration: 2000
							})
						}
					},
					fail(err) {
						console.log(err, '上传失败');
					}
				});

			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #b3d7ff;
		min-height: 100vh;
		color: #000;



		.tips {
			padding: 0 110rpx;
			margin: 100rpx 0;
			text-align: center;
			font-size: 26rpx
		}

		.img_box {
			display: flex;
			justify-content: center;

			image {
				width: 250rpx;
				height: 250rpx;
			}
		}

		.bottom_box {
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 99;
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 160rpx;
			// background-color: #f0f3f8;

			.submit_btn {
				width: 600rpx;
			}
		}
	}
</style>